<template>
    <div class='map'>
        <van-nav-bar :title="title" fixed></van-nav-bar>
        <div class="show">
            <van-tag type="primary">经度</van-tag>
            <span>{{latitude}}</span>
        </div>
        <div class="show">
            <van-tag type="primary">纬度</van-tag>
            <span>{{longitude}}</span>
        </div>
        <div class="mask" v-show="loading">
            <van-loading color="blue" type="spinner"/>
        </div>
        <FootNav/>
    </div>
</template>

<script>
import FootNav from "@/components/FootNav.vue";
export default {
    data(){
        return{
            title:"Map",
            latitude:'',//纬度
            longitude:'',//经度
            loading:true,
        }
    },
    components:{
        FootNav
    },
    mounted(){
        this.geLocation();
        window.getPos = this.getPos;
        this.getBSL();
    },
    methods:{
        geLocation(){
            let _this = this;

            if (navigator.geolocation){
                navigator.geolocation.getCurrentPosition(function(res){
                    console.log("res",res);
                    console.log("position.coords.latitude",res.coords.latitude);

                    console.log("position.coords.longitude",res.coords.longitude);
                    _this.longitude = res.coords.longitude;
                    _this.latitude = res.coords.latitude;
                    _this.loading = false;
                },function(err){
                    console.log("err",err);
                    _this.loading = false;
                    _this.$toast({
                        message:'加载失败，请手动定位'
                    })
                },
                {
                    enableHighAccuracy: false,//是否要求高精度的地理位置信息
                    timeout: 10000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
                    maximumAge:60*1000//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
                });
            }
        },
        getPos(result){
            var val= JSON.parse(result);
            alert("经度："+val.Longitude);
            alert("纬度："+val.Latitude);
        },
        getBSL(){
            BSL.GPS('getPos')
        }
    },

}
</script>

<style lang="less" scoped>
.mask{
    position: fixed;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    align-items: center;
}
.map{
    padding-top: 100px;
    .show{
        display: flex;
        height: 100px;        
        align-items: center;
        width: 200px;
        margin: 20px auto;
        justify-content: space-between;
    }
}
</style>